<!-- 绑定小区 -->
<template>
<div class='boundCell'>
    <van-nav-bar
      title="绑定小区"
      left-arrow
      @click-left="goBack"
    />
    
    <ul class="binding-list">
        <li class="border-bottom">
            <label>所在地</label>
            <span :class="{active:Boolean(city_name)}">{{city_name}}</span>
            <van-icon name="location-o" />
        </li>
        <li class="border-bottom" @click="communityObj.show = true">
            <label>小区名称</label>
            <span :class="{ active:communityObj.isActive }">{{communityObj.name}}</span>
            <van-icon name="arrow" />
        </li>
        <li class="border-bottom" @click="selectBuild">
            <label>楼栋号</label>
            <span :class="{ active:buildObj.isActive }">{{buildObj.name}}</span>
            <van-icon name="arrow" />
        </li>
        <li class="border-bottom" @click="selectUnit">
            <label>单元号</label>
            <span :class="{ active:unitObj.isActive }">{{unitObj.name}}</span>
            <van-icon name="arrow" />
        </li>
        <li class="border-bottom" @click="selectRoom">
            <label>门户号</label>
            <span :class="{ active:roomObj.isActive }">{{roomObj.name}}</span>
            <van-icon name="arrow" />
        </li>
    </ul>
    <van-popup v-model="communityObj.show" position="bottom">
        <van-picker
            show-toolbar
            :columns="communityObj.columns"
            @cancel="communityObj.show = false"
            @confirm="onConfirmCommunity"
        />
    </van-popup>
    <van-popup v-model="buildObj.show" position="bottom">
        <van-picker
            show-toolbar
            :columns="buildObj.columns"
            @cancel="buildObj.show = false"
            @confirm="onConfirmBuild"
        />
    </van-popup>
    <van-popup v-model="unitObj.show" position="bottom">
        <van-picker
            show-toolbar
            :columns="unitObj.columns"
            @cancel="unitObj.show = false"
            @confirm="onConfirmUnit"
        />
    </van-popup>
    <van-popup v-model="roomObj.show" position="bottom">
        <van-picker
            show-toolbar
            :columns="roomObj.columns"
            @cancel="roomObj.show = false"
            @confirm="onConfirmRoom"
        />
    </van-popup>
    <ul class="binding-list binding-info border-top">
        <li>
            <label>姓名</label>
            <input type="text" v-model="name" placeholder="请输入姓名">
        </li>
        <li>
            <label>身份证号</label>
            <input type="number" v-model="cardNum" placeholder="请输入身份证">
        </li>
    </ul>
    <van-button @click="submit" size="large" type="primary">确定</van-button>
</div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapMutations, mapState } from 'vuex'
export default {
//import引入的组件需要注入到对象中才能使用
name: 'BoundCell',
components: {},
data() {
//这里存放数据
return {
    name: '',                   //姓名
    cardNum: '',                //身份证号
    city_name: '黄冈',          //默认城市
    communityObj:{
        id:'',
        name:'请选择小区',
        show:false,
        columns:[],
        isActive: false,
        flag: true,
        temp:[]
    },
    buildObj:{
        id:'',
        name:'请选择所在楼栋号',
        show:false,
        columns:[],
        isActive:false,
        flag: true,
        temp:[]
    },
    unitObj:{
        id:'',
        name:'请选择所在单元号',
        show:false,
        columns:[],
        isActive:false,
        flag: true,
        temp:[]
    },
    roomObj:{
        id:'',
        name:'请选择所在门户号',
        show:false,
        columns:[],
        isActive:false,
        flag: true,
        temp:[]
    },
    flag: false
};
},
//监听属性 类似于data概念
computed: {
    token(){
        return this.$store.state.token;
    },
    userId(){
        return this.$store.state.userid;
    }
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    ...mapMutations(['changehomeId']),
    goBack(){
        window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    //提交小区信息
    submit(){
        const {city_name,communityObj,buildObj,unitObj,roomObj,name,cardNum} = this;
        let idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
        if(!city_name || !communityObj.name || !buildObj.name || !unitObj.name || !roomObj.name || !name || !cardNum){
            this.$toast('请将信息填写完整');
            return;
        }else{
            if(!idcardReg.test(cardNum)){
                this.$toast('请输入正确的身份证号码');
                return;
            }else{
                // console.log(this.token);
                console.log(this.userId);
                this.$axios.post('/comm/addbindroom',{
                            user_id:this.userId,
                            comm_name:communityObj.name,
                            comm_id:communityObj.id,
                            buil_name:buildObj.name,
                            buil_id:buildObj.id,
                            unit_name:unitObj.name,
                            unit_id:unitObj.id,
                            room_name:roomObj.name,
                            room_id:roomObj.id,
                            user_name:name,
                            id_card:cardNum
                        },{
                        headers:{token:this.token}
                    }
                    
                ).then((res)=>{
                    //console.log(res);
                    const data = res.data;
                    if(data.code === 200){
                        this.$toast(data.message);
                        this.$router.push({
                            name: 'home',
                        })
                    }else{
                        this.$toast(data.message);
                    }
                })
            }
        }
    },
    //小区的pop的确定按钮事件
    onConfirmCommunity(value){
        this.communityObj.name = value;
        this.communityObj.show = false;
        this.communityObj.isActive = true;
        this.communityObj.temp.forEach((item)=>{
            if(Object.keys(item)[0] === value){
                this.communityObj.id = item[value]
            }
        })
        //获取小区楼栋
        this.getBuild(this.communityObj.id);
        
    },
    //楼栋的pop的确定按钮
    onConfirmBuild(value){
        this.buildObj.name = value;
        this.buildObj.show = false;
        this.buildObj.isActive = true;
        this.buildObj.temp.forEach((item)=>{
            if(Object.keys(item)[0] === value){
                this.buildObj.id = item[value]
            }
        })
        //获取楼栋单元
        this.getUint(this.buildObj.id);
        //console.log(buildId);
    },
    //单元的pop的确定按钮事件
    onConfirmUnit(value){
        this.unitObj.name = value;
        this.unitObj.show = false;
        this.unitObj.isActive = true;
        this.unitObj.temp.forEach((item)=>{
            if(Object.keys(item)[0] === value){
                this.unitObj.id = item[value]
            }
        })
        //获取门户号
        this.getRoom(this.unitObj.id);
    },
    //门户号的确定按钮事件
    onConfirmRoom(value){
        this.roomObj.name = value;
        this.roomObj.show = false;
        this.roomObj.isActive = true;
        this.roomObj.temp.forEach((item)=>{
            if(Object.keys(item)[0] === value){
                this.roomObj.id = item[value]
            }
        })
    },
    //点击房间选择
    selectRoom(){
        if(this.unitObj.name.indexOf('请选择')>-1){
            this.$toast('请先选择单元');
            return false;
        }
        this.roomObj.show = true;
    },
    //点击单元选择
    selectUnit(){
        if(this.buildObj.name.indexOf('请选择')>-1){
            this.$toast('请先选择楼栋');
            return false;
        }
        this.unitObj.show = true;
    },
    //点击楼栋选择
    selectBuild(){
        if(this.communityObj.name.indexOf('请选择')>-1){
            this.$toast('请先选择小区');
            return false;
        }
        this.buildObj.show = true;
    },
    //获取小区
    getCommunity(){
        this.$axios.get('/comm/getallcomm',{
            params:{
                city_name:this.city_name,
            },
            headers:{
                token:this.token,
            }
        }).then((res)=>{
            if(res.status == 200){
                let arr = res.data;
                arr.forEach((item,index,arr)=>{
                    const o = {};
                    if(this.communityObj.columns.indexOf(item.depName)==-1){
                        o[item.depName] = item.depId;
                        this.communityObj.temp.push(o);
                        this.communityObj.columns.push(item.depName);
                    }
                })
            }else{
                console.log(res);
            }
        })
    },
    //获取楼栋号
    getBuild(id){
        this.$axios.get('/comm/getbuilding',{
            params:{
                comm_id:id,
            },
            headers:{
                //'Content-Type':'application/json',
                token:this.token
            }
        }).then((res)=>{
            if(res.status == 200){
               let arr = res.data;
               arr.forEach((item,index,arr)=>{
                   const o = {};
                   if(this.buildObj.columns.indexOf(item.buildingName)==-1){
                       o[item.buildingName] = item.buildingId;
                       this.buildObj.temp.push(o);
                       this.buildObj.columns.push(item.buildingName);
                   }
               })
                // console.log(this.buildObj.temp);
                // console.log(this.buildObj.columns);
            }else{
                console.log(res);
            }
        })
    },
    //获取单元
    getUint(id){
        this.$axios.get('/comm/getunit',{
            params:{
                building_id:id,
            },
            headers:{
                //'Content-Type':'application/json',
                token:this.token
            }
        }).then((res)=>{
            if(res.status == 200){
               let arr = res.data;
               arr.forEach((item,index,arr)=>{
                   const o = {};
                   if(this.unitObj.columns.indexOf(item.unitName)==-1){
                       o[item.unitName] = item.unitId;
                        this.unitObj.temp.push(o);
                        this.unitObj.columns.push(item.unitName);
                   }
               })
            }else{
                console.log(res);
            }
        })
    },
    //获取门户号
    getRoom(id){
        this.$axios.get('/comm/getroom',{
            params:{
                unit_id:id,
            },
            headers:{
                //'Content-Type':'application/json',
                token:this.token
            }
        }).then((res)=>{
            if(res.status == 200){
               let arr = res.data;
               arr.forEach((item,index,arr)=>{
                   const o = {};
                   if(this.roomObj.columns.indexOf(item.roomNumber)==-1){
                       o[item.roomNumber] = item.roomNumberid;
                        this.roomObj.temp.push(o);
                        this.roomObj.columns.push(item.roomNumber);
                   }
               })
            }else{
                console.log(res);
            }
        })
    }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
    //console.log(this);
    
    //console.log(this.$store.state.token);
    this.getCommunity();
},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
    this.changehomeId("")
},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url(../assets/css/border-1px.css);
.boundCell{
    .binding-list{
        li{
            line-height:0.88rem;
            padding:0 0.6rem 0 1.6rem;
            border-color: #bbb;
            font-size:0.28rem;
            position: relative;
            label{
                color:#101010;
                position: absolute;
                left:0.2rem;
                
            }
            span{
                display:block;
                color:#ccc5c6;
                text-align:right;
                &.active{color:#101010;}
            }
            .van-icon{
                position:absolute;
                right:0.16rem;
                top:50%;
                margin-top:-0.14rem;
            }
        }
        &.binding-info{
            margin-top:0.4rem;
            border-color: #bbb;
            li{
                padding-right:0;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                box-sizing: border-box;
                input{
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    flex: 1;
                    box-sizing: border-box;
                    display:block;
                    padding:0.2rem;
                    height:0.88rem;
                    line-height:0.48rem;
                    border: 0 none;
                    text-align:right;
                    &::-webkit-input-placeholder{
                        color:#bbb;
                    }
                }
            }
        }
    }
    .van-button{
        margin-top:1rem;
        font-size:0.32rem;
    }
}
</style>